<!--
 * @Descripttion: 交班账单右边卡片
-->
<template>
  <div class="handover-card-box">
    <!-- Loading 骨架屏 -->
    <div v-if="props.loading || !workLogTicketDetailData" class="skeleton-container">
      <el-skeleton :rows="20" animated />
    </div>

    <!-- 实际内容 -->
    <div v-else class="flex-col" style="width: 100%">
      <span class="font_6 text_15">收银交班单</span>
      <div class="flex-row justify-between items-center group_17">
        <span class="font_8">交班单号：</span>
        <span class="font_9">{{
          fetchObjectDeepAttrValue(workLogTicketDetailData, 'ticket_id', '无')
        }}</span>
      </div>
      <div class="flex-col">
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">营业日期：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.work_day',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">开班时间：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.start_time',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">交班时间：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.end_time',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">交班人：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.clerk_name',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">账单数：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.bill_count',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">开台数量：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.record_count',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">单均消费：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.avg_bill_amount',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">桌均消费：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.avg_record_amount',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">消费人数：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.customer_count',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">人均消费：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.avg_customer_amount',
              '无'
            )
          }}</span>
        </div>
        <div class="flex-row justify-between items-center group_18">
          <span class="font_8">收银站点：</span>
          <span class="font_9">{{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftReportInfo.computer_name',
              '无'
            )
          }}</span>
        </div>
      </div>
      <div class="space-x-line"></div>
      <span class="font_8 text_70">交班统计</span>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">消费合计</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shiftSummary.pay_total', '0')
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">会员充值</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.recharge_total',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">会员消费</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.vip_pay_total',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">收入合计</span>
        <span class="font_9">{{
          fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shiftSummary.income_total', '0')
        }}</span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">退菜合计</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.shiftSummary.back_total', '0')
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">赠送合计</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.present_total',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">备用金</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.reserve_before',
              '0'
            )
          }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_18">
        <span class="font_8">应交金额</span>
        <span class="font_9">
          {{
            fetchObjectDeepAttrValue(
              workLogTicketDetailData,
              'detail.shiftSummary.reserve_after',
              '0'
            )
          }}
        </span>
      </div>
      <!-- 动态显示详情内容 -->
      <template v-if="selectCheckedIds.includes(1)">
        <div class="space-x-line"></div>
        <span class="font_8 text_70">大类销售汇总</span>
        <div class="dgrid group_65">
          <span class="font_8">大类</span>
          <span class="font_8">金额</span>
          <span class="font_8">数量</span>
          <span class="font_8">退菜</span>
          <span class="font_8">赠送</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid group_62"
          v-for="(item, index) in categorySales"
          :key="`category-${index}`"
        >
          <span class="font_8">{{ item.category }}</span>
          <span class="font_8">{{ item.money }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.back_num || 0 }}</span>
          <span class="font_8">{{ item.present_num || 0 }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(2)">
        <div class="space-x-line"></div>
        <span class="font_8 text_70">销售类目汇总</span>
        <div class="dgrid dgrid3 group_65">
          <span class="font_8">类目</span>
          <span class="font_8">部门出品数量</span>
          <span class="font_8">销售流水</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid3 group_62"
          v-for="(item, index) in foodCategorySales"
          :key="`food-category-${index}`"
        >
          <span class="font_8">{{ item.category }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(3)">
        <div class="space-x-line"></div>
        <span class="font_8 text_106">账单明细</span>
        <div class="flex-row justify-between items-center group_65">
          <span class="font_8">账单</span>
          <span class="font_8">消费金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="flex-row justify-between items-center group_62"
          v-for="(item, index) in invoiceDetails"
          :key="`invoice-${index}`"
        >
          <span class="font_8">{{ item.order_id }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(4)">
        <div class="space-x-line"></div>
        <span class="font_8 text_106">支付方式汇总</span>
        <div class="dgrid dgrid3 group_65">
          <span class="font_8">付款方式</span>
          <span class="font_8">笔数</span>
          <span class="font_8">金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid3 group_62"
          v-for="(item, index) in payTypeSummary"
          :key="`pay-type-${index}`"
        >
          <span class="font_8">{{ item.client }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(5)">
        <div class="space-x-line"></div>
        <span class="font_8 text_106">实收</span>
        <div class="dgrid dgrid3 group_65">
          <span class="font_8">支付方式</span>
          <span class="font_8">笔数</span>
          <span class="font_8">金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid3 group_62"
          v-for="(item, index) in realPayTypeSummary"
          :key="`real-pay-type-${index}`"
        >
          <span class="font_8">{{ item.client }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
        <div class="space-x-line"></div>
        <div class="dgrid dgrid3 group_62">
          <span class="font_8">合计</span>
          <span class="font_8">{{ realPayTypeSummaryNum }}</span>
          <span class="font_8">{{ realPayTypeSummaryTotal }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(6)">
        <div class="space-x-line"></div>
        <span class="font_8 text_106">虚收</span>
        <div class="dgrid dgrid3 group_65">
          <span class="font_8">支付方式</span>
          <span class="font_8">笔数</span>
          <span class="font_8">金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid3 group_62"
          v-for="(item, index) in virtualPayTypeSummary"
          :key="`virtual-pay-type-${index}`"
        >
          <span class="font_8">{{ item.client }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
        <div class="space-x-line"></div>
        <div class="dgrid dgrid3 group_62">
          <span class="font_8">合计</span>
          <span class="font_8">{{ virtualPayTypeSummaryNum }}</span>
          <span class="font_8">{{ virtualPayTypeSummaryTotal }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(7)">
        <div class="space-x-line"></div>
        <span class="font_8 text_106">台区消费汇总</span>
        <div class="flex-row justify-between items-center group_65">
          <span class="font_8">台区类型</span>
          <span class="font_8">台区合计金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="flex-row justify-between items-center group_62"
          v-for="(item, key) in regionSummary"
          :key="`region-${key}`"
        >
          <span class="font_8">{{ item.region }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(8)">
        <div class="space-x-line"></div>
        <span class="font_8 text_70">充值明细</span>
        <div class="dgrid dgrid4 group_65">
          <span class="font_8">充值类目</span>
          <span class="font_8">付款方式</span>
          <span class="font_8">笔数</span>
          <span class="font_8">金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid4 group_62"
          v-for="(item, index) in rechargeList"
          :key="`recharge-${index}`"
        >
          <span class="font_8">{{ item.plan_name }}</span>
          <span class="font_8">{{ item.payment }}</span>
          <span class="font_8">{{ item.num }}</span>
          <span class="font_8">{{ item.money }}</span>
        </div>
        <div class="space-x-line"></div>
        <div class="dgrid dgrid4 group_62">
          <span class="font_8">合计</span>
          <span class="font_8"></span>
          <span class="font_8">{{ rechargeListTotal }}</span>
          <span class="font_8"
            >{{
              fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.rechargeDetails.total', '0')
            }}
          </span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(9)">
        <div class="space-x-line"></div>
        <span class="font_8 text_70">挂账明细</span>
        <div class="dgrid dgrid4 group_65">
          <span class="font_8">类型</span>
          <span class="font_8">挂账账户</span>
          <span class="font_8">金额</span>
          <span class="font_8">操作人</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid4 group_62"
          v-for="(item, index) in accountReceivablesDetails"
          :key="`account-receivables-${index}`"
        >
          <span class="font_8">{{ item.type }}</span>
          <span class="font_8">{{ item.name }}</span>
          <span class="font_8">{{ item.money }}</span>
          <span class="font_8">{{ item.clerk }}</span>
        </div>

        <div class="space-x-line"></div>
        <span class="font_8 text_70">挂账回款明细</span>
        <div class="dgrid dgrid4 group_65">
          <span class="font_8">回款账户</span>
          <span class="font_8">回款方式</span>
          <span class="font_8">回款单号</span>
          <span class="font_8">操作人</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid4 group_62"
          v-for="(item, index) in repaymentDetails"
          :key="`repayment-${index}`"
        >
          <span class="font_8">{{ item.name }}</span>
          <span class="font_8">{{ item.payment }}</span>
          <span class="font_8">{{ item.log_id }}</span>
          <span class="font_8">{{ item.clerk }}</span>
        </div>
        <div class="space-x-line"></div>
        <div class="dgrid dgrid4 group_62">
          <span class="font_8">合计</span>
          <span class="font_8"></span>
          <span class="font_8"></span>
          <span class="font_8">
            {{
              fetchObjectDeepAttrValue(
                workLogTicketDetailData,
                'detail.repaymentDetails.total',
                '0'
              )
            }}
          </span>
        </div>
      </template>

      <template v-if="selectCheckedIds.includes(10)">
        <div class="space-x-line"></div>
        <span class="font_8 text_106">反结账记录</span>
        <div class="dgrid dgrid3 group_65">
          <span class="font_8">反结单号</span>
          <span class="font_8">反结人</span>
          <span class="font_8">金额</span>
        </div>
        <div class="space-x-line"></div>
        <div
          class="dgrid dgrid3 group_62"
          v-for="(item, index) in reverseBillingRecords"
          :key="`reverse-billing-${index}`"
        >
          <span class="font_8">{{ item.order_id }}</span>
          <span class="font_8">{{ item.clerk }}</span>
          <span class="font_8">{{ item.sub_money }}</span>
        </div>
      </template>

      <div class="space-x-line"></div>
      <div class="flex-row justify-between items-center group_30">
        <span class="font_8">备用金</span>
        <span class="font_9">
          {{ fetchObjectDeepAttrValue(workLogTicketDetailData, 'detail.reserveFund', '0') }}
        </span>
      </div>
      <div class="flex-row justify-between items-center group_62">
        <span class="font_8">交班人签字：</span>
      </div>
      <div class="flex-row justify-between items-center group_62">
        <span class="font_8">审核人签字：</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { workLogTicketDetail, getShiftReport } from '@/api/desktop'
import { dealAssignDataFunction, fetchObjectDeepAttrValue } from '@/utils/toolsValidate'
import { mathAdd } from '@/utils/mathjsTool'

interface Props {
  selectedHandoverOrder?: any
  selectCheckedList: any[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  selectedHandoverOrder: null,
  selectCheckedList: () => [],
  loading: false
})

const ticketDetail = (data: any) => {
  workLogTicketDetailData.value = null
  return getShiftReport(data).then(res => {
    if (res.status === 200) {
      workLogTicketDetailData.value = dealAssignDataFunction(null, res?.data)
      return workLogTicketDetailData.value
    } else {
      workLogTicketDetailData.value = null

      return workLogTicketDetailData.value
    }
  })
}
defineExpose({ ticketDetail })
// 详情（小票）数据
const workLogTicketDetailData = ref<any>(null)
// 添加 loading 状态
const loading = ref(false)

// 获取选中的checkbox id列表
const selectCheckedIds = computed(() => {
  return props.selectCheckedList.map(item => item.value)
})

// 各种明细数据的computed
const rechargeList = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.rechargeDetails.list', [])
})

const repaymentDetails = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.repaymentDetails.list', [])
})

const reverseBillingRecords = computed(() => {
  return fetchObjectDeepAttrValue(
    workLogTicketDetailData.value,
    'detail.reverseBillingRecords.list',
    []
  )
})

const virtualPayTypeSummaryTotal = computed(() => {
  return virtualPayTypeSummary.value.reduce((acc: number, cur: any) => {
    const money = Number(cur.money) || 0
    return mathAdd(acc, money)
  }, 0)
})

const virtualPayTypeSummaryNum = computed(() => {
  return virtualPayTypeSummary.value.reduce((acc: number, cur: any) => {
    const num = Number(cur.num) || 0
    return mathAdd(acc, num)
  }, 0)
})

const realPayTypeSummaryTotal = computed(() => {
  return realPayTypeSummary.value.reduce((acc: number, cur: any) => {
    const money = Number(cur.money) || 0
    return mathAdd(acc, money)
  }, 0)
})

const realPayTypeSummaryNum = computed(() => {
  return realPayTypeSummary.value.reduce((acc: number, cur: any) => {
    const num = Number(cur.num) || 0
    return mathAdd(acc, num)
  }, 0)
})

const rechargeListTotal = computed(() => {
  return rechargeList.value.reduce((acc: number, cur: any) => {
    const num = Number(cur.num) || 0
    return mathAdd(acc, num)
  }, 0)
})

const foodCategorySales = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.foodCategorySales', [])
})

const categorySales = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.categorySales', [])
})

const invoiceDetails = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.invoiceDetails', [])
})

const payTypeSummary = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.payTypeSummary', [])
})

const realPayTypeSummary = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.realPayTypeSummary', [])
})

const virtualPayTypeSummary = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.virtualPayTypeSummary', [])
})

const regionSummary = computed(() => {
  return fetchObjectDeepAttrValue(workLogTicketDetailData.value, 'detail.regionSummary', {})
})

const accountReceivablesDetails = computed(() => {
  return fetchObjectDeepAttrValue(
    workLogTicketDetailData.value,
    'detail.accountReceivablesDetails',
    []
  )
})

// 获取预订小票数据
const getWorkLogTicketDetail = async (id: string) => {
  const datas = {
    shift_id: id
  }
  loading.value = true
  try {
    const res = await workLogTicketDetail(datas)
    if (res.status === 200) {
      workLogTicketDetailData.value = dealAssignDataFunction(null, res?.data?.res)
    } else {
      workLogTicketDetailData.value = null
    }
  } catch (error) {
    console.error('获取交班详情失败:', error)
    workLogTicketDetailData.value = null
  } finally {
    loading.value = false
  }
}

// 监听选中的id变化
watch(
  () => props.selectedHandoverOrder?.shift_id,
  newVal => {
    if (newVal) {
      getWorkLogTicketDetail(newVal)
    } else {
      workLogTicketDetailData.value = null
      loading.value = false
    }
  },
  { immediate: true }
)
</script>

<style lang="scss" scoped>
.hide {
  display: none !important;
  transition: all 1s !important;
}
.show {
  display: block;
  width: 420px;
  transition: all 1s;
}
.handover-card-box {
  width: 420px;
  height: 100%;
  background: #ffffff;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 30px;
  overflow-y: auto;
  transition: all 1s !important;

  //滚动条整体的大小
  &::-webkit-scrollbar {
    width: 6px !important;
    height: 0 !important;
  }
  //滚动条里滑动的滑块
  &::-webkit-scrollbar-thumb {
    height: 200px !important;
    background: #d2d2d2 !important;
    border-radius: 3px !important;
  }
  //滚动条底层样式
  &::-webkit-scrollbar-track {
    display: none !important;
  }
}

// 骨架屏容器样式
.skeleton-container {
  width: 100%;
  height: 100%;
  padding: 20px 0;

  :deep(.el-skeleton) {
    .el-skeleton__item {
      background: #f5f5f5;
      border-radius: 4px;
    }

    .el-skeleton__text {
      height: 16px;
      margin-top: 8px;
    }
  }
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-center {
  justify-content: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-around {
  justify-content: space-around;
}

.justify-between {
  justify-content: space-between;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.items-end {
  align-items: flex-end;
}

.text_15 {
  align-self: center;
  color: #353535;
}

.text_70 {
  margin-top: 20px;
  align-self: center;
}

.space-x-line {
  margin-top: 10px;
  width: 100%;
  border-top: solid 1px #e2e2e2;
}

.font_6 {
  font-size: 20px;
  font-family: PingFang SC Bold;
  font-weight: 700;
}

.font_8 {
  font-size: 14px;
  font-family: PingFang SC Bold;
  font-weight: 700;
  color: #333333;
}

.font_9 {
  font-size: 14px;
  font-family: PingFang SC Bold;
  font-weight: 700;
  color: #333333;
}

.group_17 {
  margin-top: 20px;
}

.group_18 {
  margin-top: 10px;
}

.group_30 {
  margin-top: 30px;
}

.group_62 {
  margin-top: 10px;
}

.group_65 {
  margin-top: 20px;
}

.text_106 {
  margin-top: 20px;
  align-self: center;
}

.dgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  text-align: center;
  > span:last-child {
    text-align: right;
  }
  > span:first-child {
    text-align: left;
  }
}

.dgrid3 {
  grid-template-columns: repeat(3, 1fr);
}

.dgrid4 {
  grid-template-columns: repeat(4, 1fr);
}
</style>
